<script type="text/javascript">
    // Datepicker
    $(function() {
        $("#datepicker").datepicker({ dateFormat: '{$DATEPICKER_FORMAT}' });
    });
    // Slider (hours & result)
    $(function() {
        $("#slider_hours").slider({
            value:$("#amount_hours").val(),
            min: 0,
            max: 24,
            step: 1,
            slide: function(event, ui) {
                $("#amount_hours").val(ui.value);
            }
        });
        $("#amount_hours").val($("#slider_hours").slider("value"));
    });
    $(function() {
        $("#slider_result").slider({
            value:$("#amount_result").val(),
            min: -500,
            max: 500,
            step: 10,
            slide: function(event, ui) {
                $("#amount_result").val(ui.value);
            }
        });
        $("#amount_result").val($("#slider_result").slider("value"));
    });

</script>
<form method="post" name="session_form" id="modalForm" action="{$RELPATH}/session_detail">
    <table id="mytable" cellspacing="0">
        <caption>Session detail</caption>
        <tr>
            <th scope="col" class="nobg" width="40%">Session</th>
            <th scope="col" >{$SESSION_ID}</th>
        </tr>
        <tr>
            <th scope="row" class="spec">Date:</th>
            <td><input id="datepicker" name="session_date" type="text" value="{$SESSION_DATE}" size="7"></td>
        </tr>
        <tr>
            <th scope="row" class="specalt">Location:</th>
            <td class="alt"><input type="text" value="{$SESSION_LOCATION}" name="session_location"></td>
        </tr>
        <tr>
            <th scope="row" class="spec">Type:</th>
            <td>
                {html_options name=session_type output=$SELECT_TYPES values=$SELECT_TYPES selected=$SESSION_TYPE}
            </td>
        </tr>
        <tr>
            <th scope="row" class="specalt">Game:</th>
            <td class="alt">
                {html_options name=session_game output=$SELECT_GAMES values=$SELECT_GAMES selected=$SESSION_GAME}
            </td>
        </tr>
        <tr>
            <th scope="row" class="spec">Limit:</th>
            <td>
                {html_options name=session_limit output=$SELECT_LIMITS values=$SELECT_LIMITS selected=$SESSION_LIMIT}
            </td>
        </tr>
        <tr>
            <th scope="row" class="specalt">Hours:</th>
            <td class="alt">
                <input style="float:left;" type="text" size="1" value="{$SESSION_HOURS}" name="session_hours" id="amount_hours">
                <div id="slider_hours" style="width:250px;float:left;position: relative;top:7px;left:23px;"></div>
            </td>
        </tr>
        <tr>
            <th scope="row" class="spec">Result:</th>
            <td>
                <input style="float:left;" type="text" size="3" value="{$SESSION_RESULT}" name="session_result" id="amount_result">
                <div id="slider_result" style="width:250px;float:left;position: relative;top:7px;left:7px;"></div>
            </td>
        </tr>
        <tr>
            <th scope="row" class="specalt">Notes:</th>
            <td class="alt"><textarea name="session_notes" class="tinymce">{$SESSION_NOTES}</textarea></td>
        </tr>
    </table>
    <input type="hidden" name="session_id" value="{$SESSION_ID}">
    <a onclick="send_ajax();reload_grid();"><img src="{$TEMPLATE_PATH}/images/icons/32/accept.png" title="Save"></a>
</form>
<script type="text/javascript">
    /*
     * This code is needed inline, tinymce will not run properly when called in an js file on facebox
     */
    $('textarea.tinymce').tinymce({
        // Location of TinyMCE script
        script_url : 'includes/tiny_mce/tiny_mce.js',

        // General options
        theme : "simple"

    });
    /*
     * Submit this form through ajax
     */
    function send_ajax(){

        $.ajax({
            type: $('#modalForm').attr('method'),
            url: $('#modalForm').attr('action'),
            data: $('#modalForm').serialize(),
            beforeSend: function(){
                $.blockUI({ css: {
                        border: 'none',
                        padding: '15px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                        opacity: .5,
                        color: '#fff',font:'30px'

                    } });
            },
            success: function() {
                $.unblockUI();
            }
        });
    }
</script>